﻿<DemoExample Title="Basic" RazorCode="@example1RazorCode" CsharpCode="@example1CsharpCode" Id="example1">
    <BitTimeline Items="basicCustoms" NameSelectors="nameSelectors" />
</DemoExample>

<DemoExample Title="Horizontal" RazorCode="@example2RazorCode" CsharpCode="@example2CsharpCode" Id="example2">
    <div>The Timeline offers two orientation options: Vertical (default) and Horizontal.</div>
    <br />
    <BitTimeline Horizontal Items="basicCustoms" NameSelectors="nameSelectors" />
</DemoExample>

<DemoExample Title="Disabled" RazorCode="@example3RazorCode" CsharpCode="@example3CsharpCode" Id="example3">
    <div>The Timeline offers two orientation options: Vertical (default) and Horizontal.</div>
    <br /><br /><br />
    <div>Disabled component</div><br />
    <BitTimeline Horizontal Items="basicCustoms" NameSelectors="nameSelectors" IsEnabled="false" />
    <br /><br /><br />
    <div>Disabled item</div><br />
    <BitTimeline Horizontal Items="disabledCustoms" NameSelectors="nameSelectors" />
</DemoExample>

<DemoExample Title="Variant" RazorCode="@example4RazorCode" CsharpCode="@example4CsharpCode" Id="example4">
    <div>The Timeline has three variants: Fill (default), Outline, and Text.</div>
    <br /><br /><br />
    <div>Fill</div><br />
    <BitTimeline Horizontal Variant="BitVariant.Fill" Items="disabledCustoms" NameSelectors="nameSelectors" />
    <br /><br /><br />
    <div>Outline</div><br />
    <BitTimeline Horizontal Variant="BitVariant.Outline" Items="disabledCustoms" NameSelectors="nameSelectors" />
    <br /><br /><br />
    <div>Text</div><br />
    <BitTimeline Horizontal Variant="BitVariant.Text" Items="disabledCustoms" NameSelectors="nameSelectors" />
</DemoExample>

<DemoExample Title="Icon" RazorCode="@example5RazorCode" CsharpCode="@example5CsharpCode" Id="example5">
    <div>Each item in the Timeline can have an icon.</div>
    <br /><br /><br />
    <div>Fill</div><br />
    <BitTimeline Horizontal Items="iconCustoms" NameSelectors="nameSelectors" Variant="BitVariant.Fill" />
    <br /><br /><br />
    <div>Outline</div><br />
    <BitTimeline Horizontal Items="iconCustoms" NameSelectors="nameSelectors" Variant="BitVariant.Outline" />
    <br /><br /><br />
    <div>Text</div><br />
    <BitTimeline Horizontal Items="iconCustoms" NameSelectors="nameSelectors" Variant="BitVariant.Text" />
</DemoExample>

<DemoExample Title="Reversed" RazorCode="@example6RazorCode" CsharpCode="@example6CsharpCode" Id="example6">
    <div>Each item in the Timeline can be reversed and be on the opposite side.</div>
    <br /><br /><br />
    <div>Vertical</div><br />
    <div class="example-content">
        <BitTimeline Items="basicCustoms" NameSelectors="nameSelectors" Reversed />
        <BitTimeline Items="reversedCustoms" NameSelectors="nameSelectors" />
    </div>
    <br /><br /><br />
    <div>Horizontal</div><br />
    <BitTimeline Horizontal Items="basicCustoms" NameSelectors="nameSelectors" Reversed />
    <br /><br />
    <BitTimeline Horizontal Items="reversedCustoms" NameSelectors="nameSelectors" />
</DemoExample>

<DemoExample Title="Templates" RazorCode="@example7RazorCode" CsharpCode="@example7CsharpCode" Id="example7">
    <div>Here are some examples of customizing the Timeline content.</div>
    <br /><br /><br />
    <div>Vertical</div><br />
    <BitTimeline Items="templateItems" NameSelectors="nameSelectors" />
    <br /><br /><br />
    <div>Horizontal</div><br />
    <BitTimeline Horizontal Items="templateItems" NameSelectors="nameSelectors" />
</DemoExample>

<DemoExample Title="Color" RazorCode="@example8RazorCode" CsharpCode="@example8CsharpCode" Id="example8">
    <div>Offering a range of specialized colors, providing visual cues for specific states within your application.</div>
    <br /><br /><br />
    <div>Primary</div><br />
    <BitTimeline Horizontal Color="BitColor.Primary" Items="iconCustoms" NameSelectors="nameSelectors" />
    <br />
    <BitTimeline Horizontal Color="BitColor.Primary" Variant="BitVariant.Outline" Items="iconCustoms" NameSelectors="nameSelectors" />
    <br />
    <BitTimeline Horizontal Color="BitColor.Primary" Variant="BitVariant.Text" Items="iconCustoms" NameSelectors="nameSelectors" />
    <br /><br /><br />
    <div>Secondary</div><br />
    <BitTimeline Horizontal Color="BitColor.Secondary" Items="iconCustoms" NameSelectors="nameSelectors" />
    <br />
    <BitTimeline Horizontal Color="BitColor.Secondary" Variant="BitVariant.Outline" Items="iconCustoms" NameSelectors="nameSelectors" />
    <br />
    <BitTimeline Horizontal Color="BitColor.Secondary" Variant="BitVariant.Text" Items="iconCustoms" NameSelectors="nameSelectors" />
    <br /><br /><br />
    <div>Tertiary</div><br />
    <BitTimeline Horizontal Color="BitColor.Tertiary" Items="iconCustoms" NameSelectors="nameSelectors" />
    <br />
    <BitTimeline Horizontal Color="BitColor.Tertiary" Variant="BitVariant.Outline" Items="iconCustoms" NameSelectors="nameSelectors" />
    <br />
    <BitTimeline Horizontal Color="BitColor.Tertiary" Variant="BitVariant.Text" Items="iconCustoms" NameSelectors="nameSelectors" />
    <br /><br /><br />
    <div>Info</div><br />
    <BitTimeline Horizontal Color="BitColor.Info" Items="iconCustoms" NameSelectors="nameSelectors" />
    <br />
    <BitTimeline Horizontal Color="BitColor.Info" Variant="BitVariant.Outline" Items="iconCustoms" NameSelectors="nameSelectors" />
    <br />
    <BitTimeline Horizontal Color="BitColor.Info" Variant="BitVariant.Text" Items="iconCustoms" NameSelectors="nameSelectors" />
    <br /><br /><br />
    <div>Success</div><br />
    <BitTimeline Horizontal Color="BitColor.Success" Items="iconCustoms" NameSelectors="nameSelectors" />
    <br />
    <BitTimeline Horizontal Color="BitColor.Success" Variant="BitVariant.Outline" Items="iconCustoms" NameSelectors="nameSelectors" />
    <br />
    <BitTimeline Horizontal Color="BitColor.Success" Variant="BitVariant.Text" Items="iconCustoms" NameSelectors="nameSelectors" />
    <br /><br /><br />
    <div>Warning</div><br />
    <BitTimeline Horizontal Color="BitColor.Warning" Items="iconCustoms" NameSelectors="nameSelectors" />
    <br />
    <BitTimeline Horizontal Color="BitColor.Warning" Variant="BitVariant.Outline" Items="iconCustoms" NameSelectors="nameSelectors" />
    <br />
    <BitTimeline Horizontal Color="BitColor.Warning" Variant="BitVariant.Text" Items="iconCustoms" NameSelectors="nameSelectors" />
    <br /><br /><br />
    <div>SevereWarning</div><br />
    <BitTimeline Horizontal Color="BitColor.SevereWarning" Items="iconCustoms" NameSelectors="nameSelectors" />
    <br />
    <BitTimeline Horizontal Color="BitColor.SevereWarning" Variant="BitVariant.Outline" Items="iconCustoms" NameSelectors="nameSelectors" />
    <br />
    <BitTimeline Horizontal Color="BitColor.SevereWarning" Variant="BitVariant.Text" Items="iconCustoms" NameSelectors="nameSelectors" />
    <br /><br /><br />
    <div>Error</div><br />
    <BitTimeline Horizontal Color="BitColor.Error" Items="iconCustoms" NameSelectors="nameSelectors" />
    <br />
    <BitTimeline Horizontal Color="BitColor.Error" Variant="BitVariant.Outline" Items="iconCustoms" NameSelectors="nameSelectors" />
    <br />
    <BitTimeline Horizontal Color="BitColor.Error" Variant="BitVariant.Text" Items="iconCustoms" NameSelectors="nameSelectors" />
</DemoExample>

<DemoExample Title="Size" RazorCode="@example9RazorCode" CsharpCode="@example9CsharpCode" Id="example9">
    <div>Different sizes for Timelines to meet design needs, ensuring flexibility within your application.</div>
    <br /><br /><br />
    <div>Small</div><br />
    <BitTimeline Horizontal Size="BitSize.Small" Items="iconCustoms" NameSelectors="nameSelectors" />
    <br />
    <BitTimeline Horizontal Size="BitSize.Small" Variant="BitVariant.Outline" Items="iconCustoms" NameSelectors="nameSelectors" />
    <br />
    <BitTimeline Horizontal Size="BitSize.Small" Variant="BitVariant.Text" Items="iconCustoms" NameSelectors="nameSelectors" />
    <br /><br /><br />
    <div>Medium</div><br />
    <BitTimeline Horizontal Size="BitSize.Medium" Items="iconCustoms" NameSelectors="nameSelectors" />
    <br />
    <BitTimeline Horizontal Size="BitSize.Medium" Variant="BitVariant.Outline" Items="iconCustoms" NameSelectors="nameSelectors" />
    <br />
    <BitTimeline Horizontal Size="BitSize.Medium" Variant="BitVariant.Text" Items="iconCustoms" NameSelectors="nameSelectors" />
    <br /><br /><br />
    <div>Large</div><br />
    <BitTimeline Horizontal Size="BitSize.Large" Items="iconCustoms" NameSelectors="nameSelectors" />
    <br />
    <BitTimeline Horizontal Size="BitSize.Large" Variant="BitVariant.Outline" Items="iconCustoms" NameSelectors="nameSelectors" />
    <br />
    <BitTimeline Horizontal Size="BitSize.Large" Variant="BitVariant.Text" Items="iconCustoms" NameSelectors="nameSelectors" />
</DemoExample>

<DemoExample Title="Style & Class" RazorCode="@example10RazorCode" CsharpCode="@example10CsharpCode" Id="example10">
    <div>Empower customization by overriding default styles and classes, allowing tailored design modifications to suit specific UI requirements.</div>
    <br /><br /><br />
    <div>Component's Style & Class:</div><br />
    <BitTimeline Style="max-width: max-content; color: dodgerblue;" Items="basicCustoms" NameSelectors="nameSelectors" />
    <br /><br />
    <BitTimeline Horizontal Class="custom-class" Items="basicCustoms" NameSelectors="nameSelectors" />
    <br /><br /><br /><br />
    <div>Item's Style & Class:</div><br />
    <BitTimeline Items="styleClassCustoms" NameSelectors="nameSelectors" />
    <br /><br /><br /><br />
    <div><b>Styles</b> & <b>Classes</b>:</div><br />
    <div class="example-content">
        <BitTimeline Items="iconCustoms" NameSelectors="nameSelectors"
                     Styles="@(new() { Icon = "color: whitesmoke;",
                                           Dot = "background-color: lightseagreen; border-color: mediumseagreen;",
                                           PrimaryText = "color: lightseagreen; font-weight: bold;" })" />
        <BitTimeline Items="iconCustoms" NameSelectors="nameSelectors"
                     Variant="BitVariant.Outline"
                     Classes="@(new() { Dot = "custom-dot",
                                            Icon = "custom-icon",
                                            Item = "custom-item-text",
                                            Divider = "custom-divider" })" />
    </div>
</DemoExample>

<DemoExample Title="RTL" RazorCode="@example11RazorCode" CsharpCode="@example11CsharpCode" Id="example11">
    <div>Use the BitTimeline component in right-to-left (RTL).</div>
    <br /><br /><br />
    <div>Vertical</div><br />
    <BitTimeline Dir="BitDir.Rtl" Items="basicRtlCustoms" NameSelectors="nameSelectors" />
    <br /><br /><br />
    <div>Horizontal</div><br />
    <BitTimeline Horizontal Dir="BitDir.Rtl" Items="basicRtlCustoms" NameSelectors="nameSelectors" />
</DemoExample>


@code {
    private List<Event> templateItems = new()
    {
        new()
        {
            FirstContent = (item => @<BitPersona PrimaryText="Annie Lindqvist"
            Size="@BitPersonaSize.Size32"
            Presence="@BitPersonaPresence.Online"
            ImageUrl="https://static2.sharepointonline.com/files/fabric/office-ui-fabric-react-assets/persona-female.png" />),

            DotContent = (item => @<div class="dot-template"><BitRingLoading CustomSize="30" Color="BitColor.Tertiary" /></div>),

            SecondContent = (item => @<div style="display: flex; align-items: center; gap: 1rem;">
        <BitIcon IconName="Accept" Style="color: limegreen;" />
        <BitLabel>Software Engineer</BitLabel>
    </div>)
        },
        new()
        {
            FirstContent = (item => @<BitPersona PrimaryText="Saleh Khafan"
            Size="@BitPersonaSize.Size32"
            Presence="@BitPersonaPresence.Online" />),

            DotContent = (item => @<div class="dot-template"><BitSpinnerLoading CustomSize="30" Color="BitColor.Tertiary" /></div>),

            SecondContent = (item => @<div style="display: flex; align-items: center; gap: 1rem;">
        <BitIcon IconName="Accept" Style="color: limegreen;" />
        <BitLabel>Co-Founder & CTO</BitLabel>
    </div>),
            Reversed = true
        },
        new()
        {
            FirstContent = (item => @<BitPersona PrimaryText="Ted Randall"
            Size="@BitPersonaSize.Size32"
            Presence="@BitPersonaPresence.Online"
            ImageUrl="https://static2.sharepointonline.com/files/fabric/office-ui-fabric-react-assets/persona-male.png" />),

            DotContent = (item => @<div class="dot-template"><BitRollerLoading CustomSize="30" Color="BitColor.Tertiary" /></div>),

            SecondContent = (item => @<div style="display: flex; align-items: center; gap: 1rem;">
        <BitIcon IconName="Accept" Style="color: limegreen;" />
        <BitLabel>Project Manager</BitLabel>
    </div>)
        },
    };
}